<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .layui-card {
            width: 80%;
            margin: 50px auto;
        }
    </style>
</head>
<body>

<!-- 你的HTML代码 -->
<div class="layui-card">
    <div class="layui-card-header">编辑内容</div>
    <div class="layui-card-body">
        <form class="layui-form" action="" lay-filter="linshareform">
            <div class="layui-form-item">
                <label class="layui-form-label">分享类型</label>
                <div class="layui-input-block">
                    <select id="sharetype" name="sharetype" lay-filter="sharetype">
                        <option value=""></option>
                        <option value="1" th:selected="${sharetype == 1}">0元搞定全屋设计</option>
                        <option value="2" th:selected="${sharetype == 2}">装修预算</option>
                        <option value="3" th:selected="${sharetype == 3}">样板房免费接驾到店</option>
                        <option value="4" th:selected="${sharetype == 4}">优惠券分享</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input id="title" type="text" name="title" lay-verify="title" placeholder="请输入标题" autocomplete="off"
                           class="layui-input" th:value="${title}">
                </div>
            </div>
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label">分享链接</label>
                <div class="layui-input-block">
                    <input id="url" type="text" name="url"  placeholder="请输入分享链接" autocomplete="off" th:value="${url}"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">分享图片</label>
                <img th:src="${imgurl}" id="shareimg_upload" height="300"/>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="sharetypesubmit" class="layui-btn" lay-submit lay-filter="sharetypesubmit">立即提交</button>
                    <button type="reset" id="reset" class="layui-btn layui-btn-primary" style="display: none">重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'upload'], function () {
        var layer = layui.layer,
            $ = layui.$
            , upload = layui.upload
            , form = layui.form;


        function getUrlParam(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            let r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }

        let id = getUrlParam('id');
        form.render();

        function getCookie(name) {
            var arr = document.cookie.split('; ');
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split('=');
                if (trim(arr2[0]) === name) {
                    return unescape(trim(arr2[1]));
                }
            }
            return '';
        }

        function trim(str) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }


        form.on('select(sharetype)', function (data) {
            switch (data.value) {
                case '1':
                    $('#url').val('westinghouse#/pages/index/ad_01');
                    break;
                case '2':
                    $('#url').val('westinghouse#/pages/index/ad_02');
                    break;
                case '3':
                    $('#url').val('westinghouse#/pages/index/ad_03');
                    break;
                default:
                    break;
            }

        });

        form.verify({
            title: function (value) {
                if (value == '') {
                    return '标题不能为空';
                }
            }
        });

        let imgurl = $('#shareimg_upload')[0].src;
        upload.render({
            elem: '#shareimg_upload' //绑定元素
            , url: '/layuiupload/' //上传接口
            // ,bindAction:'#sharetypesubmit'
            // ,auto: false
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    //对上传失败的单个文件重新上传，一般在某个事件中使用
                    //obj.upload(index, file);
                    $('#shareimg_upload').attr('src', result); //图片链接（base64）

                });
            }
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            }
            , done: function (res, index, upload) {
                imgurl = res.data.src;
                layer.closeAll('loading'); //关闭loading
            }
            , error: function (index, upload) {
                layer.closeAll('loading'); //关闭loading
            }
        });

        //监听提交
        form.on('submit(sharetypesubmit)', function (data) {
            const field = data.field;
            field.userId = getCookie("telphone");
            field.imgurl = imgurl;
            field.id = id;
            console.log(field);
            $.post('/api/edit_sharetype', field, function (resp) {
                if (resp.code === '0') {
                    layer.msg(resp.msg);
                    parent.layui.table.reload('sharetype'); //重载表格
                    //关闭自身弹窗
                    const index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                } else {
                    layer.msg(resp.msg);
                }
            });
            return false;
        });
    });
</script>
</body>
</html>